<template>
  <div>
    <p id="no-item">暂无数据.</p>
    <div id="items" v-for="wb, i in websStore.find(keywords)">
      <div class="read-item" :class="{ selected: curIndex === i }" @click="handleClick(i, wb.url)">
        <img :src="wb.screenshot" :title="wb.url">
        <h2>{{ wb.title }}{{ i }}--{{ curIndex }}</h2>
        <!-- 禁止事件冒泡... -->
        <button @click.stop="handleDelete(wb)"> x </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import _ from 'lodash'
import { onMounted, ref, inject } from 'vue';
import useWebsStore from '@/store'
const websStore = useWebsStore();
const curIndex = ref(0)
const keywords = inject('keywords')
// let { websites } = websStore  // 无语 不可以这样写。。。
onMounted(() => {
  websStore.init();
})
const handleClick = (index, url) => {
  curIndex.value = index
  // TODO 打开一个新的页面弹窗... ...
  myApi.openWebSite(url)
}
// 删除
const handleDelete = (wb) => {
  websStore.delWebs(wb.url);
  curIndex.value = 0
}


</script>

<style lang="stylus" >

#no-item
  font-weight bold
  color silver
  text-align center
  width 100%
  position absolute
  top 100px
  z-index -1

#items
  .read-item
    display flex
    align-items center
    align-content center
    border-bottom lightgray 2px solid
    background #fafafa
    border-left 10px solid lightgray
    -webkit-user-select none
    position relative
    padding 10px
    img
      width 20%
      margin-right 25px
      border solid 1px #ccc
    &:hover
      background #eee
    &:hover button
      display inline-block
    &.selected
      border-left-color dodgerblue
    button
      position absolute
      display none
      right 10px
      top 10px
      width 30px
      height 30px
      background #f44336
      border none
      border-radius 50%
      color white
      text-align center
      font-size 16px
      cursor pointer
</style>